<template>
    <div>
        <gm-nav></gm-nav>
        <div class="main-container">
            <gm-title>
                <template v-slot:title>短片专题</template>
                <template v-slot:text>主题短片集合</template>
            </gm-title>
            <el-row :gutter="20">
                <el-col 
                v-for="item in topicArr"
                :key="item.id"
                :span="8">
                    <div class="grid-content bg-purple">
                       <topic-list
                       :topicObj="item"
                       ></topic-list>
                    </div>
                </el-col>
            </el-row>
            <div class="pager">
                <ul>
                    <li class="active">
                        <a href="javascript:;">1</a>
                    </li>
                    <li>
                        <a href="javascript:;">2</a>
                    </li>
                    <li>
                        <a href="javascript:;">3</a>
                    </li>
                    <li>
                        <a href="javascript:;">4</a>
                    </li>
                    <li>
                        <a href="javascript:;">5</a>
                    </li>
                    <li>
                        <a href="javascript:;">6</a>
                    </li>
                    <li>
                        <a href="javascript:;">7</a>
                    </li>
                    <li>
                        <a href="javascript:;">8</a>
                    </li>
                    <li>
                        <a href="javascript:;">9</a>
                    </li>
                    <li>
                        <a href="javascript:;">10</a>
                    </li>
                    <li class="next">
                        <a href="javascript:;">下一页</a>
                    </li>
                </ul>
            </div>
        </div>
        <gm-footer></gm-footer>
    </div>
</template>

<script>
import gmNav from '../components/gmNav.vue'
import gmTitle from "@/components/gmTitle.vue"
import topicList from "@/components/gmTopicList.vue"
import gmFooter from "@/components/gmFooter.vue"

export default {
    name:"Topic",
    components:{
        gmNav,
        gmTitle,
        topicList,
        gmFooter
    },
    data(){
        return {
            topicArr:[],
        }
    },
    mounted(){
        let url = "data/ckData.json";
        let gms = axios.get(url);
        gms.then( res => {
            this.topicArr = res.data.topic
        });
    }
}
</script>

<style lang="scss" scoped>
.main-container{
    width: 1180px;
    margin: 0 auto;
    .pager{
        padding-top: 20px;
        padding-bottom: 30px;
        ul{
            display: flex;
            justify-content: center;
            li{
                margin: 0 4px;
                a{
                    display: block;
                    color: #999;
                    padding: 3px 8px;
                }
                &.active{
                    background: #0196E3;
                    a{
                        color: #fff;
                    }
                }
                &:hover{
                    background: #0196E3;
                    a{
                        color: #fff;
                    }
                }
            }
            li.next{
                &:hover{
                    background: #ddd;
                    a{
                        color: #999;
                    }
                }
            }
        }
    }
}
</style>